<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        自定义练习-001
    </title>
    <script type="text/javascript" , src="../js/vue.js">

    </script>
</head>

<body>
    <div id="root">



        <school> asda </school>
        <hr>
        <student></student>
        <hr>
        <h2> {{msg}} </h2>
        <hr>
        <hello></hello>
        <!-- <CustomComponet>
<>
            <practice01> -->

    </div>
    <script type="text/javascript">

        // import practice01 from "./practice01.vue";
        // import CustomComponet from "./practice01.vue";
        Vue.config.productionTip = false


        const school = Vue.extend({
            template: `<div>
            <h2>学校地址 {{address}}</h2>
            <h2>学校名称 {{schoolName}}</h2>
            <button @click="click">这</button>
            </div>`,
            data() {
                return {
                    schoolName: "尚硅谷",
                    address: '背景长'
                }
            },
            methods: {
                click() {
                    alert("asdas")
                }
            },
        })

        const student = Vue.extend({
            template: `<div>
            <h2>学生姓名 {{stuName}}</h2>
            <h2>学生贵庚 {{age}}</h2>
            </div>`,
            data() {
                return {
                    stuName: "小黑",
                    age: 18,
                }
            }
        })

        const hello = Vue.extend({
            template: `<div>
            <h2>hello {{name}}</h2>
            <h2>hello贵庚 {{age}}</h2>
            </div>`,
            data() {
                return {
                    name: "TOm",
                    age: 38,
                }
            }
        })
        ///第二步  全局类型的
        Vue.component('hello',hello)
        new Vue({
            el: '#root',
            // data() {
            //     return {
            //         greeting: 'Hello'
            //     }
            // }, 拒不注册
            data: {
                msg: "你好呀"
            },
            components: {
                school: school,
                student: student
            }
        })
    </script>
</body>

</html>